<template>
  <div class="buyingIfor">
    <template v-for="(i,index) in dataList">
      <a-card :key="index">
        <div>
          <template v-for="(item,index1) in btn">
            <a-button
              :key="index1"
              @click="handler(index1,index)"
              v-if="item.isShow"
              type="primary"
              style="margin:0 10px 0px 0"
            >{{item.title}}</a-button>
          </template>
          <div class="total">
            <p>
              <span>共</span>
              <span>{{total.number}}</span>
              <span>种商品</span>
            </p>
            <!-- <p>
              <a-input-search placeholder="商品名称或条码" v-model="searchForm.key" style="width: 200px" @search="onSearch" />
            </p>-->
            <!-- <span>{{price}}</span> -->
          </div>
          <a-table
            rowKey="id"
            :columns="tableOption"
            :dataSource="i.loadData"
            :loading="loading"
            :pagination="false"
          >
            <span slot="span" slot-scope="text,record">{{record.outNum - record.confirmOutNum}}</span>
          </a-table>
        </div>
        <choiceGoods ref="choiceGoods" @trigger="trigger" />
      </a-card>
    </template>
  </div>
</template>

<script src='./buyingIfor.js'></script>

<style lang="less">
.buyingIfor {
  .title {
    padding: 0 0 20px 0;
    font-weight: 500;
    font-size: 24px;
  }
  .total {
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    span:nth-child(even) {
      font-weight: 700;
      font-size: 24px;
    }
    span:nth-child(odd) {
      font-weight: 600;
      font-size: 20px;
    }
  }
}
</style>